<template>
	<view class="card5">
		<view class="card-box-title" :style="{fontSize: fontSize, fontBold: fontBold}">支付方式</view>
		<view style="height: 16rpx;"/>
		<u-radio-group 
			placement="column"
		    v-model="payWay"
			@change="changePayRadio"
			>
			<view @click="changePay(pay)" class="radio-item" v-for="pay in payList" :key="pay.key">
				<view class="radio-item-left">
					<u-icon :name="pay.icon" size="20"></u-icon>
					<text class="radio-item-left-text">{{pay.title}}</text>
				</view>
				<u-radio :name="pay.key" :activeColor="appColor"></u-radio>
			</view>
		</u-radio-group>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	export default {
		name: 'JoyPay',
		props: {
			fontSize: {
				type: String,
				default: '28rpx'
			},
			fontBold: {
				type: String,
				default: 'bold'
			},
		},
		data() {
			return {
				payWay: 1,
			}
		},
		computed: {
			...mapState(['appInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			payList() {
				let allPayMethods = [
					{title: '微信支付', icon: 'weixin-fill', key: 1},
					{title: '余额支付', icon: 'rmb-circle', key: 2},
				];
				let curPayMethods = [];
				let payMethods = this.appInfo.payMethod.split(',');
				if(payMethods.length === allPayMethods.length) {
					curPayMethods = allPayMethods;
				} else {
					curPayMethods = allPayMethods.filter(item => item.key === Number(payMethods[0]));
				}
				this.payWay = curPayMethods[0].key;
				this.setPay(curPayMethods[0].key);
				return curPayMethods
			},
		},
		methods: {
			// 支付方式改变
			changePay({key}) {
				this.setPay(key);
			},
			changePayRadio(e) {
				this.setPay(e);
			},
			setPay(value) {
				this.payWay = value;
				this.$emit('changePay', value);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card5 {
		.card-box-title {
			color: #333;
		}
		.radio-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 52rpx;
			.radio-item-left {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #333;
				.radio-item-left-text {
					padding-left: 4rpx;
				}
			}
		}
	}
</style>